var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/functionalComponent/table/child/header.tsx
var header_exports = {};
__export(header_exports, {
  TableHeader: () => TableHeader
});
module.exports = __toCommonJS(header_exports);
var import_icons = require("@ant-design/icons");
var import_antd = require("antd");
var import_react = __toESM(require("react"));
var import_react_dom = __toESM(require("react-dom"));
var import_react_resizable = require("react-resizable");
var import_react_sortable_hoc = require("react-sortable-hoc");
var import_tooltip = require("../../antd/tooltip");
var import_common = require("../base/common");
var import_util = require("../util");
var import_filter = require("./filter");
var import_order = require("./order");
var HeaderCellResize = ({ column: { propColumnIndex, resizable, width }, ...restProps }) => {
  const { table } = (0, import_react.useContext)(import_common.TableContext);
  const [offset, setOffset] = (0, import_react.useState)({ width, x: 0, h: "100%", isResizing: false });
  const resizeRef = (0, import_react.useRef)();
  const tmpRef = (0, import_react.useRef)();
  (0, import_react.useEffect)(() => {
    if (!offset.isResizing && offset.width !== width) {
      setOffset((prevState) => ({ ...prevState, width, x: 0 }));
    }
  });
  if (resizable) {
    const onResizeStart = () => {
      if (!tmpRef.current) {
        tmpRef.current = import_util.util.closest(resizeRef.current, (el) => el.classList.contains("virtual-table"));
      }
      tmpRef.current.style.pointerEvents = "none";
      document.body.style.userSelect = "none";
      document.body.style.cursor = "col-resize";
      resizeRef.current.parentElement.classList.add("is-resizing");
    };
    const onResize = (_e, { size }) => {
      if (size.width !== offset.width) {
        setOffset({
          width: size.width,
          x: size.width - width,
          h: table.state.height,
          isResizing: true
        });
      }
    };
    const onResizeStop = (_e, { size }) => {
      tmpRef.current && (tmpRef.current.style.pointerEvents = "auto");
      document.body.style.userSelect = "";
      document.body.style.cursor = "";
      resizeRef.current.parentElement.classList.remove("is-resizing");
      setOffset((prev) => ({ ...prev, x: 0, h: "100%", isResizing: false }));
      if (size.width !== width) {
        table.refreshView({
          state: () => {
            const { columns } = table.state;
            columns[propColumnIndex].offsetWidth = size.width;
            return { columns: [...columns] };
          },
          rowColumnIndex: { columnIndex: 0 },
          cacheState: true
        });
      }
    };
    return /* @__PURE__ */ import_react.default.createElement(
      import_react_resizable.Resizable,
      {
        width: offset.width,
        height: 0,
        handle: (_, ref) => {
          const setRef = (nodeCurrent) => {
            ref.current = nodeCurrent;
            resizeRef.current = nodeCurrent;
          };
          return /* @__PURE__ */ import_react.default.createElement(
            "span",
            {
              className: `stop-propagation resizable-handle${offset.isResizing ? " is-resizing" : ""}`,
              ref: setRef,
              style: { transform: `translateX(${offset.x}px)`, height: offset.h }
            }
          );
        },
        onResizeStart,
        onResize,
        onResizeStop,
        draggableOpts: { enableUserSelectHack: false }
      },
      /* @__PURE__ */ import_react.default.createElement("div", { ...restProps })
    );
  } else {
    return /* @__PURE__ */ import_react.default.createElement("div", { ...restProps });
  }
};
var EditFlag = ({ editor, dataIndex }) => {
  const { table } = (0, import_react.useContext)(import_common.TableContext);
  if (!editor || !table.props.editColumnIcon) {
    return null;
  }
  const { required } = editor;
  const style = { marginRight: 2, fontWeight: "normal", opacity: 0.5, transform: "scale(0.7)" };
  if (required) {
    style.color = "var(--primary-color)";
  }
  if (import_util.util.isFunction(table.props.editColumnIcon)) {
    return table.props.editColumnIcon({ table, dataIndex, editor, style });
  }
  return /* @__PURE__ */ import_react.default.createElement(import_icons.EditOutlined, { style });
};
var HeaderCell = ({ column, cellStyle }) => {
  var _a;
  const { table } = (0, import_react.useContext)(import_common.TableContext);
  const {
    title,
    width,
    dataIndex,
    columnIndex,
    headerTooltip,
    headerStyle,
    columnSort,
    sortable,
    header,
    filter,
    originEditor
  } = column;
  const style = { ...cellStyle, width, ...(0, import_util.convertStyle)(headerStyle) };
  if (((_a = column.groupIn) == null ? void 0 : _a.length) && !title && !header) {
    return /* @__PURE__ */ import_react.default.createElement("div", { style: { ...style, height: 0 } });
  }
  const headerCellClick = (0, import_util.useRefCallback)((e) => {
    table.notify({ e, column }, "onHeaderCellClick");
  });
  sortable && (style.cursor = "pointer");
  const renderIcon = (cStyle) => /* @__PURE__ */ import_react.default.createElement("span", { className: "stop-propagation", style: cStyle }, sortable && /* @__PURE__ */ import_react.default.createElement(import_order.OrderIcon, { column }), filter && /* @__PURE__ */ import_react.default.createElement(import_filter.FilterIcon, { column, table }));
  const titleInfo = import_util.util.isFunction(header) ? header({ title, dataIndex, column, table }) : header || title;
  const info = import_util.util.isString(titleInfo) ? /* @__PURE__ */ import_react.default.createElement("span", { className: "nowrap" }, titleInfo) : titleInfo;
  return /* @__PURE__ */ import_react.default.createElement(
    HeaderCellResize,
    {
      index: columnIndex,
      column,
      onClick: headerCellClick,
      className: import_util.util.classNames("header-cell", `${columnSort ? "react-sortable" : ""}`),
      key: columnIndex,
      style
    },
    style.textAlign === "right" && renderIcon({ marginRight: 4, display: "inline-block" }),
    /* @__PURE__ */ import_react.default.createElement(EditFlag, { editor: originEditor, dataIndex }),
    headerTooltip ? /* @__PURE__ */ import_react.default.createElement(import_tooltip.Tooltip, { title: info, overflow: true }, info) : info,
    style.textAlign !== "right" && renderIcon({ marginLeft: 4, position: "absolute", display: "flex", right: 8 })
  );
};
var FixedHeader = ({ type, children }) => {
  const {
    table: { groupColumns, cellStyle },
    columns: { headerLineHeight, unUsedWidth }
  } = (0, import_react.useContext)(import_common.TableContext);
  const columns = groupColumns[type];
  if (columns.length === 0) {
    return children ? /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        style: {
          display: "inline-flex",
          position: "absolute",
          right: 0,
          zIndex: -1,
          top: 0,
          bottom: 0
        }
      },
      children
    ) : /* @__PURE__ */ import_react.default.createElement("span", null);
  }
  const style = type === "left" ? { left: 0, zIndex: 1 } : { right: 0, zIndex: 2, marginRight: unUsedWidth };
  return /* @__PURE__ */ import_react.default.createElement("div", { className: `fc fixed-cell-${type}`, style }, getGroupContainer(columns, headerLineHeight, cellStyle), children);
};
function getGroupContainer(groupColumns, headerLineHeight, cellStyle, SortCell) {
  return groupColumns.map((groupColumn, groupIndex) => {
    if (groupColumn.children) {
      return /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          key: groupIndex,
          style: {
            height: "100%",
            display: "inline-flex",
            flexDirection: "column"
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: "column-group",
            style: {
              height: headerLineHeight,
              width: "100%",
              fontSize: 14,
              justifyContent: "center"
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: "nowrap",
              style: {
                width: 0,
                minWidth: "100%",
                height: "100%",
                alignItems: "center",
                justifyContent: "center",
                paddingRight: 1,
                display: "flex"
              }
            },
            import_util.util.isFunction(groupColumn.groupTitle) ? groupColumn.groupTitle({ column: groupColumn }) : groupColumn.groupTitle
          )
        ),
        /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1, display: "inline-flex" } }, getGroupContainer(groupColumn.children, headerLineHeight, cellStyle, null))
      );
    } else {
      const ColumnCell = groupColumn.columnSort ? SortCell ?? HeaderCell : HeaderCell;
      return /* @__PURE__ */ import_react.default.createElement(
        ColumnCell,
        {
          key: (groupColumn.dataIndex || "-") + groupIndex,
          index: groupColumn.propColumnIndex,
          disabled: !groupColumn.columnSort,
          cellStyle,
          column: groupColumn
        }
      );
    }
  });
}
function getSortEnd(table) {
  return ({ oldIndex, newIndex }) => {
    if (oldIndex !== newIndex) {
      table.refreshView({
        state: () => {
          const { columns } = table.state;
          const item = columns.splice(oldIndex, 1)[0];
          columns.splice(newIndex, 0, item);
          return { columns: [...columns] };
        },
        rowColumnIndex: { columnIndex: 0 },
        cacheState: true
      });
    }
  };
}
var SortableHeaderContainer = () => {
  var _a;
  const {
    table,
    columns: {
      fixedColumns: { left, right },
      columnSort,
      groupable,
      headerLineHeight
    }
  } = (0, import_react.useContext)(import_common.TableContext);
  const {
    outRef: { current: gridIns },
    groupColumns,
    props: { bordered }
  } = table;
  const headStyle = {
    whiteSpace: "nowrap",
    display: "inline-flex",
    height: "100%",
    paddingLeft: left.width,
    paddingRight: right.width,
    transform: `translateX(-${((_a = gridIns == null ? void 0 : gridIns.state) == null ? void 0 : _a.scrollLeft) || 0}px)`
  };
  const zwLeft = !groupable && !bordered && left.width > 0;
  const zwStyle = { padding: 0, width: 0, left: 1, zIndex: 2 };
  const { SortContainer, SortElement: SortCell } = (0, import_util.useDraggableSort)(columnSort, HeaderCell);
  if (SortContainer) {
    const shouldCancelStart = (e) => (0, import_util.domContains)("stop-propagation", e.target);
    return /* @__PURE__ */ import_react.default.createElement(
      SortContainer,
      {
        axis: "x",
        lockAxis: "xy",
        pressDelay: 250,
        shouldCancelStart,
        onSortEnd: getSortEnd(table)
      },
      /* @__PURE__ */ import_react.default.createElement("span", { style: headStyle, className: "normal-cells" }, zwLeft && /* @__PURE__ */ import_react.default.createElement("div", { className: "header-cell", style: zwStyle }), getGroupContainer(groupColumns.normal, headerLineHeight, table.cellStyle, SortCell), right.width > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "header-cell", hidden: true }))
    );
  } else {
    return /* @__PURE__ */ import_react.default.createElement("span", { style: headStyle, className: "normal-cells" }, zwLeft && /* @__PURE__ */ import_react.default.createElement("div", { className: "header-cell", style: zwStyle }), getGroupContainer(groupColumns.normal, headerLineHeight, table.cellStyle), right.width > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "header-cell", hidden: true }));
  }
};
var HeaderMenu = ({ showHeaderMenu }) => {
  const {
    table,
    columns: { headerLineHeight }
  } = (0, import_react.useContext)(import_common.TableContext);
  const [visible, setVisible] = (0, import_react.useState)(false);
  const [change, setChange] = (0, import_react.useState)([]);
  const onChange = (0, import_util.useRefCallback)((column, columnIndex, e) => {
    const index = change.indexOf(columnIndex);
    column.hidden = !e.target.checked;
    if (index > -1) {
      change.splice(index, 1);
    } else {
      change.push(columnIndex);
    }
    setChange([...change]);
  });
  (0, import_util.useIUPEffect)(() => {
    if (change.length > 0) {
      table.refreshView({
        state: { columns: [...table.state.columns] },
        rowColumnIndex: { columnIndex: 0 },
        cacheState: true
      });
      setChange([]);
    }
  }, [change]);
  const onVisibleChange = (flag) => {
    setVisible(flag);
    flag && setChange([]);
  };
  const items = (0, import_react.useMemo)(() => {
    const columnItems = table.state.columns.filter((c) => !c.propHidden);
    const DraggableHandle = (0, import_react_sortable_hoc.SortableHandle)(({ disabled }) => /* @__PURE__ */ import_react.default.createElement(
      import_icons.HolderOutlined,
      {
        style: {
          fontSize: 14,
          opacity: disabled ? 0.1 : 0.4,
          cursor: disabled ? "" : "grab",
          marginRight: 7,
          padding: "3px 3px 3px 0"
        }
      }
    ));
    const DraggableItem = (0, import_react_sortable_hoc.SortableElement)(({ children, column }) => {
      const setFixed = (fixed) => () => {
        column.fixed = fixed;
        table.refreshView({
          state: { columns: [...columnItems] },
          rowColumnIndex: { columnIndex: 0 },
          cacheState: true
        });
      };
      return /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "column-setting-item",
          style: { padding: "5px 12px", display: "flex", userSelect: "none", minWidth: 120 }
        },
        /* @__PURE__ */ import_react.default.createElement(DraggableHandle, { disabled: column.hidden }),
        /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, children),
        /* @__PURE__ */ import_react.default.createElement(
          "span",
          {
            className: "column-fixed-icon",
            style: {
              color: import_util.cssVar.primaryColor,
              fontSize: 14,
              gap: 5,
              display: "flex",
              alignItems: "center",
              justifyContent: "right",
              width: 35
            }
          },
          (!column.fixed || column.fixed === "right") && /* @__PURE__ */ import_react.default.createElement(import_tooltip.Tooltip, { title: "固定在左侧" }, /* @__PURE__ */ import_react.default.createElement(import_icons.VerticalAlignTopOutlined, { onClick: setFixed("left") })),
          column.fixed && /* @__PURE__ */ import_react.default.createElement(import_tooltip.Tooltip, { title: "取消固定" }, /* @__PURE__ */ import_react.default.createElement(import_icons.VerticalAlignMiddleOutlined, { onClick: setFixed(false) })),
          column.fixed !== "right" && /* @__PURE__ */ import_react.default.createElement(import_tooltip.Tooltip, { title: "固定在右侧" }, /* @__PURE__ */ import_react.default.createElement(import_icons.VerticalAlignBottomOutlined, { onClick: setFixed("right") }))
        )
      );
    });
    const tmp = [[], [], [], []];
    const [left, center, right, _items] = tmp;
    columnItems.forEach((column) => {
      const { header, title, dataIndex, propColumnIndex, hidden, fixed, editor = {} } = column;
      const collection = fixed ? fixed === "right" ? 2 : 0 : 1;
      const headTxt = import_util.util.isFunction(header) ? header({
        title,
        dataIndex,
        column,
        table
      }) : header || title || dataIndex;
      const item = {
        key: `${dataIndex}_${propColumnIndex}`,
        label: /* @__PURE__ */ import_react.default.createElement(DraggableItem, { index: propColumnIndex, collection, disabled: hidden, column }, /* @__PURE__ */ import_react.default.createElement(
          import_antd.Checkbox,
          {
            onChange: (e) => onChange(column, propColumnIndex, e),
            disabled: editor == null ? void 0 : editor.required,
            style: { whiteSpace: "nowrap" },
            defaultChecked: !hidden
          },
          headTxt
        ))
      };
      if (collection === 0) {
        left.push(item);
      } else if (collection === 1) {
        center.push(item);
      } else {
        right.push(item);
      }
    });
    left.length > 0 && _items.push({ label: "固定在左侧", key: "left", type: "group", children: left });
    center.length > 0 && _items.push({ label: "不固定", key: "center", type: "group", children: center });
    right.length > 0 && _items.push({ label: "固定在右侧", key: "right", type: "group", children: right });
    return [
      {
        label: /* @__PURE__ */ import_react.default.createElement(
          import_antd.Space.Compact,
          {
            block: true,
            style: {
              justifyContent: "space-between",
              alignItems: "center",
              backgroundColor: "#fff",
              cursor: "default",
              padding: "5px 12px"
            }
          },
          "列设置",
          /* @__PURE__ */ import_react.default.createElement(
            "a",
            {
              onClick: () => {
                import_util.util.setCache(table.stateId, void 0);
                table.refreshView({
                  rowColumnIndex: { columnIndex: 0 },
                  cacheState: false,
                  state: {
                    columns: table._initColumns()
                  }
                });
              }
            },
            "重置"
          )
        ),
        key: "op"
      },
      {
        type: "divider"
      },
      ..._items
    ];
  }, [showHeaderMenu, table.state.columns]);
  const dropdownRender = (0, import_util.useReturnCallback)(() => {
    const DraggableContainer = (0, import_react_sortable_hoc.SortableContainer)(() => {
      return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 5 } }, items.map((itm) => {
        var _a;
        return itm.type === "group" ? /* @__PURE__ */ import_react.default.createElement("ul", { key: itm.key, style: { margin: 0, padding: 0 } }, /* @__PURE__ */ import_react.default.createElement("div", { key: "group", style: { color: "rgba(0,0,0,0.45)", padding: "5px 12px" } }, itm.label), (_a = itm.children) == null ? void 0 : _a.map((c) => import_react.default.cloneElement(c.label, { key: c.key }))) : itm.type === "divider" ? /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { key: "divider", style: { margin: 4 } }) : import_react.default.cloneElement(itm.label, { key: itm.key });
      }));
    });
    return /* @__PURE__ */ import_react.default.createElement(DraggableContainer, { useDragHandle: true, onSortEnd: getSortEnd(table), helperClass: "row-dragging menu-checkbox" });
  }, [items]);
  const rendererElement = (createPortal = false) => {
    if (import_util.util.isFunction(showHeaderMenu)) {
      return showHeaderMenu({ table });
    }
    return /* @__PURE__ */ import_react.default.createElement(
      import_antd.Popover,
      {
        className: import_util.util.classNames({ advanced: !createPortal }),
        placement: "bottomRight",
        overlayStyle: { marginRight: 1, padding: 0 },
        overlayInnerStyle: { padding: 0, maxHeight: 400, overflowY: "auto" },
        content: dropdownRender,
        trigger: ["click"],
        open: visible,
        arrow: false,
        onOpenChange: onVisibleChange
      },
      showHeaderMenu.icon || /* @__PURE__ */ import_react.default.createElement(import_icons.MoreOutlined, { style: { height: headerLineHeight - 1 } })
    );
  };
  if (showHeaderMenu.inTableAlert) {
    if (!table.settingContainer) {
      table.settingContainer = document.createElement("div");
      table.settingContainer.style.display = "flex";
    }
    return import_react_dom.default.createPortal(rendererElement(true), table.settingContainer);
  }
  if (showHeaderMenu.getContainer) {
    const container = import_util.util.isFunction(showHeaderMenu.getContainer) ? showHeaderMenu.getContainer() : document.getElementById(showHeaderMenu.getContainer);
    if (container) {
      return import_react_dom.default.createPortal(rendererElement(true), container);
    }
  }
  return rendererElement();
};
var TableHeader = import_react.default.memo(() => {
  const {
    table,
    columns: { groupable }
  } = (0, import_react.useContext)(import_common.TableContext);
  const headerHeight = table.headerHeight;
  const { hiddenHeader = false, headerMenu = true } = table.props;
  const headContainerStyle = { height: headerHeight };
  const [scrollBarWidth] = (0, import_react.useState)((0, import_util.getScrollBarInfo)().width);
  const showHeaderMenu = table.state.columns.length > 0 ? headerMenu : false;
  if (hiddenHeader || headerHeight <= 1) {
    return null;
  }
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: table.headerRef,
      className: `virtual-table-header${groupable ? " header-group" : ""}`,
      style: headContainerStyle
    },
    /* @__PURE__ */ import_react.default.createElement(FixedHeader, { type: "left" }),
    /* @__PURE__ */ import_react.default.createElement(SortableHeaderContainer, null),
    /* @__PURE__ */ import_react.default.createElement(FixedHeader, { type: "right" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "scrollbar-placeholder", style: { width: scrollBarWidth, display: "none" } })),
    showHeaderMenu && /* @__PURE__ */ import_react.default.createElement(HeaderMenu, { showHeaderMenu })
  );
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  TableHeader
});
